<template>
	<view class="paper">
		<view class="redPaper_box">
			<view class="redPaper">
				<image class="redPaper_banner" src="../../static/image/mine/new/redpaper_banner.png" mode=""></image>
				<view class="rule" @tap="userRule">
					<image src="../../static/image/mine/integral/explain.png" mode=""></image>
					使用规则
				</view>
				<view class="redPaper_info">
					<view class="redPaper_info_allPaper">
						红包总额 (元)
					</view>
					<view class="redPaper_info_two">
						<view class="num">
							0.2
						</view>
						<view class="toget" @tap="toSign">
							去获取
						</view>
					</view>
					<view class="redPaper_info_three">
						<view class="redPaper_info_three_l">
							<view class="title">
								未生效金额
							</view>
							<view class="num">
								0
							</view>
						</view>
						<view class="redPaper_info_three_l">
							<view class="title">
								今日失效
							</view>
							<view class="num">
								0
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 切换导航 -->
		<view class="nav">
			<view :class="['navList',navIndex == index ? 'navList_l':'']" 
			@tap="changeNav(index)"
			v-for="(item, index) in nav" 
			:key = "index">
				{{item}}
				<view v-if="navIndex == index" class="navList_line"></view>
			</view>	
		</view>
		<!-- 收入明细 -->
		<view class="income">
			<view class="income_list" v-for="(item,index) in incomeList" :key="index">
				<view class="income_list_l">
					<view class="income_list_title">
						{{item.title}}
					</view>
					<view class="income_list_time">
						有效期：{{item.start_time}} ～ {{item.end_time}}
					</view>
				</view>
				<view class="income_list_r">
					+{{item.price}}
				</view>
			</view>
		</view>
		<uni-popup ref="userRule" type="bottom">
			<view class="rule_tips">
				<view class="rule_tips_title">
					使用规则
				</view>
				<view class="rule_tips_item" v-for="(Ru,index) in ruleinfo" :key="index">
					{{Ru.content}}
				</view>
				<view class="btn" @tap="close">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data () {
			return {
				incomeList: [
					{
						title:'任务获取-签到',
						start_time: '2020-01-06',
						end_time: '2020-03-06',
						price: '0.3'
					},
					{
						title:'任务获取-签到',
						start_time: '2020-01-06',
						end_time: '2020-03-06',
						price: '0.3'
					},
					{
						title:'任务获取-签到',
						start_time: '2020-01-06',
						end_time: '2020-03-06',
						price: '0.3'
					}
				],
				nav: ['收入明细','使用明细'],
				navIndex:0,
				ruleinfo: [
					{
						content: '1.现金红包可与优惠券叠加使用，下单直接抵现，有特殊要求的商品除外；'
					},
					{
						content: '2.抵扣金额不得超过单笔订单金额的50%'
					},
					{
						content: '3.现金红包不能用于抵扣运费等非购买商品产生的费用'
					},
					{
						content: '4.因用户个人原因造成订单退货退款，红包不予退还'
					},
					{
						content: '5.因用户个人原因未及时使用红包而造成失效，不予退还；'
					},
					{
						content: '6.大促活动期间，官方有权利调整红包使用规则'
					}
				]
			}
		},
		methods: {
			changeNav (index) {
				this.navIndex = index
			},
			toSign () {
				uni.navigateTo({
					url: '/pageA/signin/signin'
				})
			},
			userRule () {
				this.$refs.userRule.open()
			},
			close () {
				this.$refs.userRule.close()
			}
		}
	}
</script>

<style lang="less" scoped>
	.paper {
	}
	.redPaper_box {
		overflow: hidden;
		width: 100%;
		background-color: #FFFFFF;
	}
	.redPaper {
		width: 704upx;
		height: 326upx;
		margin:20upx auto;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
		.rule {
			position: absolute;
			top: 40upx;
			right: 50upx;
			display: flex;
			align-items: center;
			font-size: 24upx;
			color: #FFFFFF;
			image {
				width: 24upx;
				height: 24upx;
				margin-right: 10upx;
			}
		}
		.redPaper_info {
			position: absolute;
			top: 40upx;
			left: 50upx;
			.redPaper_info_allPaper {
				font-size: 28upx;
				color: #FFFFFF;
			}
			.redPaper_info_two {
				display: flex;
				align-items: center;
				margin: 20upx 0;
				.num {
					font-size: 48upx;
					color: #FFFFFF;
					font-weight: bold;
				}
				.toget {
					width: 140upx;
					height: 48upx;
					border-radius: 24upx;
					background-color: #FFFFFF;
					font-size: 28upx;
					color: #f73e2f;
					text-align: center;
					line-height: 48upx;
					margin-left: 40upx;
				}
			}
			.redPaper_info_three {
				display: flex;
				.redPaper_info_three_l {
					margin-right: 80upx;
					.title {
						font-size: 28upx;
						color: #FFFFFF;
					}
					.num {
						font-size: 40upx;
						color: #FFFFFF;
						font-weight: bold;
					}
				}
			}
		}
	}
	.nav {
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
		.navList {
			font-size: 28upx;
			color: #333333;
			position: relative;
			line-height: 28upx;
			z-index: 3;
			.navList_line {
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: -7upx;
				width: 120%;
				height: 14upx;
				border-radius: 7upx;
				background-color: #fdd8d5;
				z-index: -1;
			}
		}
		.navList_l {
			color: #f73e2f,
		}
	}
	.income {
		width: 100%;
		padding: 0 30upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
		box-sizing: border-box;
		.income_list {
			width: 100%;
			height: 140upx;
			border-bottom: 2upx solid #E1E1E1;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.income_list_title {
				font-size: 28upx;
				color: #333333;
				line-height: 28upx;
			}
			.income_list_time {
				margin-top: 20upx;
				font-size: 24upx;
				color: #999999;
				line-height: 28upx;
			}
			.income_list_r {
				font-size: 28upx;
				color: #fec004;
				font-weight: bold;
			}
		}
		.income_list:last-child {
			border-bottom: none;
		}
	
	}
	.rule_tips {
		width: 100%;
		height: 700upx;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: relative;
		.rule_tips_title {
			font-size: 32upx;
			color: #333333;
			text-align: center;
			line-height: 80upx;
		}
		.rule_tips_item {
			margin: auto;
			width: 660upx;
			line-height: 32upx;
			font-size: 24upx;
			color: #999999;
			margin-top: 20upx;
		}
		.btn {
			position: absolute;
			width: 690upx;
			height: 80upx;
			text-align: center;
			bottom: 20upx;
			left: 50%;
			transform: translate(-50%);
			border-radius: 40upx;
			line-height: 80upx;
			font-size: 32upx;
			color: #FFFFFF;
			background: linear-gradient(to right,#f73e2f 0%,#fa5c4f 100%);
		}
	}
</style>
